<template>
  <!-- api日志-->
  <div>
    <div class="row-header">
      <el-form :model="form" ref="form" label-width="50px" :style="{'width': $store.state.app.screenWidth<450?'400px':'100%'}" :inline="$store.state.app.screenWidth<992?false:true">
        <el-form-item label=" " prop="loginNameSearch" v-if="role=='OEM_ADMIN'">
          <el-autocomplete class="inline-input" size="small" v-model="form.loginNameSearch" style="width: 260px;"
                           :fetch-suggestions="querySearch" :trigger-on-focus="false" @select="handleSelect"
                           placeholder="请输入代理账号"></el-autocomplete>
        </el-form-item>
        <el-form-item label=" " prop="time">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            range-separator="至"
            start-placeholder="付款开始日期"
            end-placeholder="付款结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="row-form-btn">
        <el-button type="shenda" size="mini" @click="page.current=1;findList();"><i class="el-icon-search"></i> 查询</el-button>
        <el-button type="shenda" size="mini" @click="resetForm('form')"><i class="el-icon-refresh"></i> 重置</el-button>
      </div>
    </div>
    <div class="split-line"></div>
    <div class="row-main">
      <el-table
        :data="tableData" :header-cell-style="{ 'background':$store.state.app.tableBgColor,'color':'#606266' }"
        v-loading.fullscreen="mainTableLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.2)" class="row-main-table">
        <el-table-column prop="loginName" label="代理账号" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" :fixed="$store.state.app.screenWidth<992?true:false"></el-table-column>
        <el-table-column prop="cardNumbers" label="充值卡号" align="center">
          <template v-slot="{ row, rowIndex }">
            <el-button type="shenda" size="mini" @click="cardRechargeDetail(row.cardList)">点击查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="付款价格" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column prop="payTimeTime" label="付款时间" align="center" :width="$store.state.app.screenWidth<992?'180px':'auto'" ></el-table-column>
        <el-table-column prop="dictPayMethodName" label="付款方式" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column prop="actPay" label="实际付款金额" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column prop="dictStatusName" label="付款状态" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" >
          <template v-slot="{ row, rowIndex }">
            <div :style="{color:row.dictStatusName=='已付款'?'green':'red'}">{{row.dictStatusName}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="successCount" label="成功个数" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column prop="failCount" label="失败个数" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column prop="dealUser" label="创建用户" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" >
          <template v-slot="{ row, rowIndex }">
              {{row.loginName=='官方操作'?"*****":row.dealUser}}
          </template>
        </el-table-column>
        <el-table-column prop="reason" label="备注" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column prop="insertTimeTime" label="创建时间" align="center" :width="$store.state.app.screenWidth<992?'130px':'auto'" ></el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template v-slot="{ row, rowIndex }">
            <el-button type="shenda" size="mini" @click="gotoDetail(row.id)">充值详情</el-button>
            <el-button type="shenda" size="mini" @click="retry(row.id)" v-preventReClick>重试</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div :style="{'overflow-x': $store.state.app.screenWidth<992?'scroll':'none'}">
        <el-pagination
          background
          class="row-main-pager"
          :current-page="page.current"
          :page-size="page.size"
          :page-sizes="[10, 20, 50, 100]"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange">
        </el-pagination>
      </div>
      <el-dialog title="批量充值卡详情" :visible.sync="cardDetailDialog" :append-to-body="true">
        <div v-for="(v,i) in detailList" :key="i" style=" width: 100%;height: auto;max-height: 500px;padding-left: 20px;padding-right: 20px;
border-top: 1px #DCDFE6 solid;border-left:1px #DCDFE6 solid ;border-right: 1px #DCDFE6 solid;
">
          <div style="width: 100%;margin-top: 30px;word-wrap:break-word;">{{v.nums.join(",")}}</div>
          <el-divider content-position="left">{{v.setMealName}}</el-divider>
        </div>
      </el-dialog>
    </div>
  </div>


</template>
<script>
  import {cusBatchRechargeOrderList, retryBatchRecharge,getLoginName} from '@/api/getData'
  //
  export default {
    name: "oemTransOrder",
    data() {
      return {
        mainTableLoading: false,
        tableData: [],
        cardDetailDialog: false,
        page: {
          current: 1,
          size: 10,
          total: 0
        },
        detailList: [],
        retryLoading: false,
        pagekey: '',
        form:{
          time: '',
          loginNameSearch: '',
        },
        role: '',
      }
    },
    async created() {
      this.role = localStorage.getItem('roleChar')
      this.findList();
      this.pagekey = await this.$getPageKey();
    },
    methods: {
      findList() {
        this.mainTableLoading = true;

        cusBatchRechargeOrderList({
          loginName: this.form.loginNameSearch,
          payTimeStart: this.form.time?this.form.time[0]:'',
          payTimeEnd: this.form.time?this.form.time[1]:'',
          page: this.page,
          cardNumber: this.cardNumber,
          flag: this.flag
        }).then(response => {
          this.mainTableLoading = false
          this.tableData = [];
          this.total = 0;
          if(response.data.records){
            this.tableData = response.data.records
            this.page.total = response.data.total
          }
        })
      },
      handlePageChange(currentPage) {
        this.page.current = currentPage
        this.findList()
      },
      handleSizeChange(val) {
        this.page.size = val;
        this.page.current = 1;
        this.findList()
      },
      cardRechargeDetail(numbers) {
        this.cardDetailDialog = true;
        this.detailList = numbers;
      },
      gotoDetail(id) {
        this.$router.push({path: '/rechargeBatch/batchRechargeDetail', query: {id} })
      },
      async retry(id) {
        this.$confirm('重试仅对付费成功但尚未生成订单的数据有效，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          this.retryLoading = true;
          retryBatchRecharge({id},{pagekey: this.pagekey}).then(v => {
            if(v._result){
              this.$message.success("重试成功！请查看详情是否有失败订单！");
            }
            this.retryLoading= false;
          });
          this.pagekey = await this.$getPageKey();
        }).catch(() => {
          this.retryLoading = false;
          this.$message({
            type: 'info',
            message: '已取消重试'
          });
        });

      },
      async querySearch(queryString, cb) {
        let a = await getLoginName({
          loginname: this.form.loginNameSearch
        });
        if (a._result) {
          this.loginNames = [];
          for (let i = 0; i < a.data.length; i++) {
            this.loginNames.push({value: a.data[i]});
          }
        }

        var loginNames = this.loginNames;
        cb(loginNames);
      },
      handleSelect(val){
        this.form.loginNameSearch = val.value;
      },
      resetForm(formName){
        this.$refs[formName].resetFields()
      }
    }
  }
</script>

<style scoped>

</style>
